<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
    ></search-header>
    <multi-fun-table
      :sortColumn="notFormatColumn"
      :orderType="sortType"
      :fixed-cols="fixedCols"
      :is-reset-table="isResetTable"
      :theads-info="theadsInfo"
      :tbodys-info="tbodysInfo"
      @handleMultiCheck="handleMultiCheck"
      @handleSortColumn="handleSortColumn"
      @searchFn="getList"
      @getNextPage="getNextPage"
    >
      <!--按钮-->
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a class="ake_btn ake_btn_text" @click.prevent="_addSeat()">新增</a>
      </div>

      <!--普通列-->
      <template slot="tdCell" slot-scope="props">
        <el-table-column
          :fixed="props.fixed"
          :label="props.label"
          :min-width="props.minWidth"
          :width="props.width"
          :prop="props.prop"
          :sortable="props.sortable"
        >
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
            <span
              v-else-if="'createTime' == props.prop"
            >{{scope.row[props.prop] | mileSecondToDate}}</span>
            <span
              v-else-if="'chakan' == props.prop"
              class="row-href cursor"
              @click="lookPrivilege(scope.row.id)"
            >查看</span>
            <span v-else-if="'seatStatus' == props.prop">{{scope.row[props.prop]?"冻结":"启用"}}</span>
            <span v-else-if="'onlineStatusText'==props.prop && scope.row['onlineStatus']==2">离开</span>
            <span
              v-else-if="'onlineStatusText'==props.prop && scope.row['onlineStatus']==1 && !scope.row['lastOnlineTime']"
            >上班中</span>
            <span
              v-else-if="'onlineStatusText'==props.prop && scope.row['onlineStatus']==1 && scope.row['lastOnlineTime']"
            >上班中({{scope.row['lastOnlineTime'] | timeStampFormat}})</span>
            <span v-else-if="'onlineStatusText'==props.prop && scope.row['onlineStatus']==0">休息中</span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <!--操作列内的按钮-->
      <template slot="operateCell" slot-scope="props">
        <el-table-column :fixed="props.fixed" :label="props.label" width="150" class="operateCell">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              icon="icon-edit"
              class="ake-icon-font"
              title="编辑"
              @click="handle(scope.row,'edit')"
              plain
            ></el-button>
            <el-button
              size="small"
              type="primary"
              icon="icon-lock"
              class="ake-icon-font"
              title="冻结"
              v-if="scope.row['seatStatus']==0"
              @click="handle(scope.$index,'isUp')"
              plain
            ></el-button>
            <el-button
              size="small"
              type="primary"
              icon="icon-unlock_normal"
              class="ake-icon-font"
              title="启用"
              v-if="scope.row['seatStatus']==1"
              @click="handle(scope.$index,'isUp')"
              plain
            ></el-button>
            <el-button
              title="强制下班"
              size="small"
              type="primary"
              icon="icon-offDuty"
              class="ake-icon-font"
              @click="forceoffwork(scope.row)"
              :disabled="scope.row['onlineStatus']!=1"
              plain
            ></el-button>
            <el-button
              size="small"
              type="danger"
              icon="icon-delete"
              class="ake-icon-font"
              title="删除"
              @click="handle(scope.row,'del')"
              plain
            ></el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <!---->
    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

    <!--modal-->
    <!--新增用户-->
    <basic-modal
      ref="seatFormModal"
      width="680"
      height="400"
      customeClass="user-row-modal"
      static="true"
    >
      <h3 class="modal-otitle" slot="title">{{seatForm.id?"编辑-用户":"新增-用户"}}</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="seatForm"
          :model="seatForm"
          :rules="seatFormRules"
          label-position="left"
          label-width="80px"
          style="width: 500px"
        >
          <el-form-item label="登录帐号" prop="userid">
            <el-input
              :disabled="seatForm.id?true:false"
              class="first-item"
              v-model="seatForm.userid"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="seatForm.id?false:true" label="登录密码" prop="password">
            <el-input
              class="first-item"
              v-model="seatForm.password"
              type="password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="seatForm.id?true:false" label="登录密码">
            <el-input
              class="first-item"
              v-model="seatForm.password"
              type="password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="确认密码" prop="passWordAgain">
            <el-input class="first-item" v-model="seatForm.passWordAgain" type="password" auto-complete="off"></el-input>
          </el-form-item>-->
          <el-form-item label="坐席姓名" prop="username">
            <el-input class="first-item" v-model="seatForm.username" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="userphone">
            <el-input class="first-item" v-model="seatForm.userphone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="值班车场" prop="parkList" required>
            <div class="park">
              <template v-if="seatForm.parkList.length">
                <el-tooltip placement="bottom-start">
                  <div slot="content">
                    <ul class="selectParkingLotTree">
                      <li
                        v-for="(item,index) in seatForm.parkList"
                        :key="index"
                        style="margin-bottom: 4px; font-size: 12px;"
                      >
                        {{ item.name }}
                        <ul v-for="(it,index) in item.channelList" :key="index">
                          <li>{{it.channelName}}</li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                  <div class="selected-parkingLot">{{inputParkstr}}</div>
                </el-tooltip>
              </template>
              <div v-if="!seatForm.parkList.length" class="selected-parkingLot">{{inputParkstr}}</div>
              <el-button
                size="small"
                type="primary"
                @click="openPrivilegeModal()"
                class="ake_btn ake_btn_text"
              >选择停车场</el-button>
            </div>
            <!-- <el-input placeholder="请选择停车场" :disabled="true" type="textarea" v-model="inputParkstr" class="select-park-textarea"></el-input> -->
            <!-- <span class="ake_btn ake_btn_text" @click="openPrivilegeModal()">选择停车场</span> -->
          </el-form-item>
          <el-form-item label="语音对讲" prop="speaker">
            <el-checkbox v-model="seatForm.speaker"></el-checkbox>
          </el-form-item>
          <!-- <el-form-item label="备注" prop="des">
            <el-input type="textarea" class="first-item" v-model="seatForm.des"></el-input>
          </el-form-item>-->
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <el-button
          type="primary"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="saveSeatForm('seatForm','seatFormModal')"
        >确认</el-button>
        <el-button class="ake_btn ake_btn_text modal-close" @click="closed('seatFormModal')">取消</el-button>
      </div>
    </basic-modal>
    <!--选择权限树-->
    <basic-modal
      ref="setPrivilegeModal"
      width="500"
      customeClass="select-Privilege-modal"
      static="true"
    >
      <h3 slot="title">{{seatPrivilegeData.modalName}}</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="privilegeTree" name="privilegeTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          v-if="seatPrivilegeData.modalName.indexOf('查看权限') == -1"
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="SetPrivilege('privilegeTree')"
        >确认</button>
        <button
          v-else
          class="ake_btn ake_btn_text modal-close"
          @click="closed('setPrivilegeModal',2)"
        >取消</button>
      </div>
    </basic-modal>
    <!--冻结 modal-->
    <basic-modal
      ref="freezeModal"
      :bodyTxt="tbodysInfo[editIndex]&&tbodysInfo[editIndex].seatStatus==0?'是否冻结该账号？':'是否启用该账号？'"
    >
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="_isUp(tbodysInfo[editIndex])"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('freezeModal')">关闭</button>
      </div>
    </basic-modal>
    <!--至少选择一项  modal-->
    <basic-modal ref="voidTipModal" bodyTxt="请至少选择一项">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_blue ake_btn_text modal-close"
          @click="closed('voidTipModal')"
        >关闭</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import "../../assets/js/libs/jquery.ztree.core.min.js";
import "../../assets/js/libs/jquery.ztree.excheck.min.js";
// import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
// import images from '@mixins/image.js'

// 引进vue的js
import CendutySeat from "./js/cenduty_seat_manage.js";

export default {
  name: "cendutySeatManage",
  mixins: [common, stardardList, invokeModal, CendutySeat],
  data() {
    return {
      total: 0,
      fixedCols: 0,
      QRCode: "",
      searchList: [
        {
          index: 1,
          isShow: false,
          type: "text",
          name: "username",
          text: "坐席人员姓名",
          value: ""
        },
        {
          index: 2,
          type: "select",
          isShow: false,
          name: "onlineStatus",
          text: "当班状态",
          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "离开", value: "2" },
            { name: "休息中", value: "0" },
            { name: "上班中", value: "1" }
          ]
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 56 },
        {
          index: 1,
          isShow: false,
          prop: "userid",
          text: "登录账号",
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: "username",
          text: "坐席姓名",
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "chakan",
          text: "值班车场",
          minWidth: 45
        },
        {
          index: 4,
          isShow: false,
          prop: "userphone",
          text: "手机号码",
          minWidth: 60
        },
        // {
        //   index: 5,
        //   isShow: false,
        //   prop: "des",
        //   text: "备注",
        //   minWidth: 50,
        //   initHidden: true
        // },
        {
          index: 6,
          isShow: false,
          prop: "createTime",
          text: "创建时间",
          minWidth: 80,
          initHidden: true
        },
        {
          index: 7,
          isShow: false,
          prop: "onlineStatusText",
          text: "当班状态",
          minWidth: 80
        }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="less">
@import "../../assets/less/libs/zTreeStyle.css";
@import "../../assets/less/manage.less"; //选择车场
//私人配置
.modal-oform {
  padding: 20px 62px 30px 62px;
}
.modal-otitle {
  font-size: 16px;
  padding-left: 14px;
}
.select-park-textarea {
  width: 255px;
  margin-right: 11px;
  color: #333;
  > textarea {
    height: 30px !important;
    resize: none;
    outline: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.park {
  display: flex;
  .el-form-item {
    flex: 1;
    margin-right: 35px;
  }
}

.role-row-modal {
  .first-item {
    width: 240px;
  }
}
.role-select {
  width: 240px;
}
.text-btn {
  padding: 0px 10px !important;
  height: 25px !important;
  line-height: 25px !important;
}
//权限树样式start
.modal-body {
  max-height: 800px;
  overflow-y: scroll;
}
.select-Privilege-modal {
  padding-bottom: 30px;
  .modal-body {
    max-height: 400px;
  }
}
.QRCodeBox {
  margin: 20px auto;
  width: 200px;
  height: 200px;
}
.wechatMsg {
  .wechatPicBox {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  p {
    text-align: center;
  }
}

//权限树样式end
</style>
